import { Cell, Image } from '@taroify/core';
import { View } from '@tarojs/components';
import dianzan from '@/assets/images/message/dianzan.png';
import huifu from '@/assets/images/message/huifu.png';
import tidao from '@/assets/images/message/tidao.png';
import fensi from '@/assets/images/message/fensi.png';
import { Arrow } from '@taroify/icons';
import Taro from '@tarojs/taro';

export default () => {
  const menus = [
    {
      title: '点赞',
      image: dianzan,
      type: '0',
    },
    {
      title: '回复',
      image: huifu,
      type: '1',
    },
    {
      title: '@我的',
      image: tidao,
      type: '2',
    },
    {
      title: '粉丝',
      image: fensi,
      type: '3',
    },
  ];
  function router(menu) {
    Taro.navigateTo({
      url: `/pages/message/notification?title=${menu.title}&type=${menu.type}`,
    });
  }
  return (
    <View className="px-5 py-8">
      <View className="text-xl font-bold text-black">通知</View>
      <View className="mt-8 flex flex-col gap-4">
        {menus.map((menu, i) => (
          <View
            onClick={() => router(menu)}
            key={i}
            className="flex justify-between items-center "
          >
            <View className="flex flex-grow gap-1 items-center">
              <View>
                <Image src={menu.image} className="w-10 h-10" />
              </View>
              <View className="text-sm">
                <View>{menu.title}</View>
                <View className="text-gray-400 text-xs">还没有消息哦</View>
              </View>
            </View>
            <Arrow />
          </View>
        ))}
      </View>
    </View>
  );
};
